<template>
	<view class="pb30 pt10">
		<view class="pl30 pr30">
			<!-- 搜索 -->
			<search :from="1" :searchQuery="query"/>
			<!-- //搜索 -->
		</view>

		<!-- 轮播图区域 -->
		<view class="">
			<u-swiper :list="list" @click="gotoOther" border-radius="0" height="380"></u-swiper>
		</view>
		<!-- //轮播图区域 -->

		<view class="pl30 pr30">
			<!-- 宫格导航区域 -->
			<u-grid :col="5" :border='false'>
				<u-grid-item v-for="(item,i) in gridList" :key='i' bg-color='#F5F5F5' @click="$jump('/subpkg/goodsSecondLevel/goodsSecondLevel?id='+item.id+'&title='+item.title)">
					<image :src="item.pic" class="w90 h90"></image>
					<view class="grid-text">{{item.title}}</view>
				</u-grid-item>
			</u-grid>
			<!-- //宫格导航区域 -->
			
		<!-- 	<view class="flex row-center mt30">
				<image src="~@/static/image/index/haowuyouxuan.png" class="w310 h36"></image>
			</view> -->
			
			<!-- 商品列表区域 -->
				<goodsList  :goodslist="goodslist"/>
			<!-- //商品列表区域 -->
		</view>
	</view>
</template>

<script>
	import search from '@/components/search/search.vue'
	import goodsList from '@/components/goodsList/goodsList.vue'
	export default {
		name:'goods',
		components: {
			search,
			goodsList
		},
		onLoad() {
			//获取产品分类列表
			this.getCategory()
			this.getgoodsList()
			//获取轮播图
			this.getcircle_index()
		},
		data() {
			return {
				//节流阀
				onloading:false,
				// 轮播图
				list: [],
				//宫格导航
				gridList:[],
				//
				goodslist:[],
				query:{
					page:1,
					size:10,
					name:''
				}
			};
		},
		methods: {
			//获取轮播图
			getcircle_index() {
				this.$api.circle_index().then(res=>{
					console.log('322',res)
					res.data.forEach(item=>{
						item.image=item.pic
						this.list.push(item)
					})
					// this.gridList=res.data
				})
			},
			//获取宫格导航
			getCategory() {
				this.$api.category().then(res=>{
					// console.log(res)
					this.gridList=res.data
				})
				
			},
			//产品中心商品列表
			getgoodsList() {
				//开启节流阀
				this.onloading=true
				this.$api.qualityGoods(this.query).then(res=>{
					console.log(res)
					//关闭节流阀
					this.onloading=false
					this.goodslist=[...this.goodslist,...res.data]
				}).catch(err=>{
					//关闭节流阀
					this.onloading=false
				})
			},
			gotoOther(e) {
				// console.log(index)
				if(this.list[e].url_switch==1) {
					if(this.list[e].url_type=='goods_detail') {
						let spu=this.list[e].params.spu
						uni.navigateTo({
							url:'/subpkg/goodsDetail/goodsDetail?spu='+spu
						})
					}else if(this.list[e].url_type=='shop_detail') {
						let id=this.list[e].params.id
						uni.navigateTo({
							url:'/subpkg/brandDetail/brandDetail?shop_id='+id
						})
					}else if (this.list[e].url_type=='goods_list'){
						let category_id=this.list[e].params.category_id.category_id
						uni.navigateTo({
							url:'/subpkg/goodsSecondLevel/goodsSecondLevel?id='+category_id
						})
					}
				}
			}
		},
		onReachBottom() {
			if(this.onloading) {
				return
			}
			this.query.page++
			this.getgoodsList()
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}
	.goodsItem {
		width: 48%;
		background-color: #FFFFFF;
		padding-bottom: 20rpx;
		margin-top: 30rpx;
	}
</style>
